<template>
  <a-card style="margin-top: 0.8rem" :bodyStyle="{ padding: '2rem' }">
    <a-row type="flex" justify="space-around">
      <a-col v-for="item in oneWeek" :key="item.title" :span="3">
        <a-badge :dot="weekbadage[item.titleNumber - 1]">
          <span
            :class="item.titleNumber == day ? 'my-col col-active' : 'my-col'"
            @click="day = item.titleNumber"
            >{{ item.title }}</span
          >
        </a-badge>
      </a-col>
    </a-row>
    <div v-if="courseCopy.length == 0">
      <p style="text-align: center; margin-top: 1.2rem">今日暂无课程</p>
    </div>
    <div
      v-else
      :key="item.curriculum.time"
      v-for="item in courseCopy"
      class="schedule_card"
      :style="item.style"
    >
      <div
        class="flexbox"
        v-for="(one, idx) in item.curriculum"
        :key="idx"
        @click="jmpRoute(item, idx)"
      >
        <h3 style="color: #fff">{{ item.course_name }}</h3>
        <a-tag color="blue" style="height: fit-content">
          {{ one.odd }}
        </a-tag>
        <a-tag color="green" style="height: fit-content">
          {{ one.time }}
        </a-tag>
        <a-icon
          type="right-circle"
          style="font-size: 2rem; margin-top: 0.5rem"
        />
        <div class="flexbox">
          <h4 style="color: #fff">{{ item.teacher }}</h4>
          <p>{{ one.classroom }}</p>
        </div>
      </div>
    </div>

  </a-card>
</template>

<script>
import * as socket from "@/utils/socket";
import { mapState } from "vuex";
// import moment from 'moment';

export default {
  name: "ScheduleCard",
  data() {
    let oneWeek = [
      { title: "一", titleNumber: 1 },
      { title: "二", titleNumber: 2 },
      { title: "三", titleNumber: 3 },
      { title: "四", titleNumber: 4 },
      { title: "五", titleNumber: 5 },
      { title: "六", titleNumber: 6 },
      { title: "七", titleNumber: 7 },
    ];
    return {
      weekbadage: [false, false, false, false, false, false, false],
      oneWeek,
      nowTime: new Date(),
      day: 1,
      currentList: [],
      courseCopy: [],
    };
  },
  watch: {
    day: function () {
      this.changeSchedule(this.day);
    },
  },
  async mounted() {
    // 获取课程
    await this.getCourse();
    // 获取课程徽标
    this.updateWeekBadge();
    socket.createInstance("student", this);
  },
  computed: {
    ...mapState({
      studentId: (state) => state.public.studentId,
      studentName: (state) => state.public.userName,
      uid: (state) => state.public.uid,
      courseList: (state) => state.student.courseList,
      user: (state) => state.student.user,
    }),
  },
  methods: {
    async getCourse() {
      let date = this.nowTime;
      let year = "";
      // let year = date.getFullYear();
      //  + '-' + Number(date.getFullYear() + 1);
      // let semester = date.getMonth() < 3 || date.getMonth() > 9 ? 1 : 2;
      let semester = -1;

      if (date.getMonth() < 3) {
        year = date.getFullYear() - 1 + "-" + date.getFullYear();
        semester = 1;
      } else if (date.getMonth() > 9) {
        year = date.getFullYear() + "-" + (date.getFullYear() + 1);
        semester = 1;
      } else {
        year = date.getFullYear() - 1 + "-" + date.getFullYear();
        semester = 2;
      }

      this.day = date.getDay();
      let timeData = {
        student_id: this.uid,
        year: year,
        semester: semester,
      };
      await this.$store.dispatch("student/getCourseList", timeData).then(() => {
        // 默认为今天
        this.changeSchedule(this.day);
      });
    },
    updateWeekBadge() {
      // 初始化
      this.weekbadage = [false, false, false, false, false, false, false];
      //根据课表加载徽标
      console.log(
        "🚀 ~ file: ScheduleCard.vue ~ line 129 ~ this.courseList.map ~ this.courseList",
        this.courseList
      );
      this.courseList.map((item) => {
        item.curriculum.map((temp) => {
          switch (temp.week) {
            case 1:
              this.weekbadage[0] = true;
              break;
            case 2:
              this.weekbadage[1] = true;
              break;
            case 3:
              this.weekbadage[2] = true;
              break;
            case 4:
              this.weekbadage[3] = true;
              break;
            case 5:
              this.weekbadage[4] = true;
              break;
            case 6:
              this.weekbadage[5] = true;
              break;
            case 7:
              this.weekbadage[6] = true;
              break;
          }
        });
      });
    },
    changeSchedule(value) {
      // 点击后确认课程有无
      this.currentList = [];
      console.log(
        "🚀 ~ file: ScheduleCard.vue ~ line 172 ~ changeSchedule ~ this.courseList",
        this.courseList
      );
      // 数组深拷贝
      var [...courseList] = JSON.parse(JSON.stringify(this.courseList));

      this.currentList = courseList.filter((course) => {
        let curriculum = [];
        course.curriculum = course.curriculum.filter((courseTime) => {
          return courseTime.week == value;
        });

        if (course.curriculum.length != 0) {
          return true;
        }
      });
      console.log(
        "🚀 ~ file: ScheduleCard.vue ~ line 183 ~ this.currentList=this.courseList.filter ~ this.currentList",
        this.currentList
      );
      this.courseCopy = [];
      let len = 0;
      for(let i = 0; i < this.currentList.length; i ++) {
        for(let j = 0; j < this.currentList[i].curriculum.length; j ++){
          let cour = {course_id:"",course_name:"",lesson_id:"",teacher:"",style:"",curriculum:[]};
          cour.course_id = this.currentList[i].course_id;
          cour.course_name = this.currentList[i].course_name;
          cour.lesson_id = this.currentList[i].lesson_id;
          cour.teacher = this.currentList[i].teacher;
          cour.style = this.currentList[i].style;
          cour.curriculum.push(this.currentList[i].curriculum[j]);
          this.courseCopy.push(cour);
        }
      }
      console.log("++++++++courseCpy+++++++",this.courseCopy);
    },
    jmpRoute(item, idx) {
      console.log("scheduleCard+++");
      socket.sendEvent("joinRoom", {
        actionType: "enter",
        role: "student",
        roomId: item.lesson_id,
        data: { studentId: this.studentId, studentName: this.studentName },
      });
      this.$router.push({
        path: "/student/course/" + item.course_id,
        query: {
          title: item.course_name,
          lessonId: item.lesson_id,
          roomNumber: item.curriculum[idx].classroom.split(":")[1],
        },
      });
    },
  },
};
</script>

<style>
.flexbox {
  display: flex;
  color: #fff;
  justify-content: space-between;
}
</style>
